<template>
    <div class="exchange-view">
        <a-card :title="$t('cardManagement')" :bordered="false">
            <a-tabs v-model:activeKey="activeTab">
                <a-tab-pane key="exchange" :tab="$t('exchange')">
                    <p>{{ $t('exchangeBoxCapacity') }}: {{ gameStore.playerData.cards.length }} / 10</p>
                    <a-row :gutter="[16, 16]" v-if="gameStore.playerData.cards.length > 0">
                        <a-col v-for="cardId in gameStore.playerData.cards" :key="cardId">
                            <a-card hoverable class="card-container card-wrapper">
                                <img
                                    :src="cardConfig.cards[cardId]?.image || 'https://via.placeholder.com/120x150'"
                                    alt="卡片图片"
                                    class="card-image"
                                />
                                <div class="card-info">
                                    <p class="card-title">{{ cardConfig.cards[cardId]?.name || cardId }}</p>
                                    <p class="card-value">{{ cardConfig.cards[cardId]?.value || '未知' }}</p>
                                </div>
                                <a-space style="display: inline-flex;flex-direction: column;width: 100%;">
                                    <a-button size="small" @click="async () => await gameStore.moveToSafeBox(cardId)">
                                        {{ $t('moveToSafeBox') }}
                                    </a-button>
                                    <a-button size="small" type="danger" @click="gameStore.sellCard(cardId)">
                                        {{ $t('sell') }}
                                    </a-button>
                                </a-space>
                            </a-card>
                        </a-col>
                    </a-row>
                    <a-empty v-else/>
                </a-tab-pane>
                <a-tab-pane key="safeBox" :tab="$t('safeBox')">
                    <p>{{ $t('safeBoxCapacity') }}: {{ gameStore.playerData.safeBox.length }} / 50</p>
                    <a-row :gutter="[16, 16]" v-if="gameStore.playerData.safeBox.length > 0">
                        <a-col v-for="cardId in gameStore.playerData.safeBox" :key="cardId">
                            <a-card hoverable class="card-container">
                                <img
                                    :src="cardConfig.cards[cardId]?.image || 'https://via.placeholder.com/120x150'"
                                    alt="卡片图片"
                                    class="card-image"
                                />
                                <div class="card-info">
                                    <p class="card-title">{{ cardConfig.cards[cardId]?.name || cardId }}</p>
                                    <p class="card-value">{{ cardConfig.cards[cardId]?.value || '未知' }}</p>
                                </div>
                                <a-button size="small" @click="async () => await gameStore.moveToExchangeBox(cardId)" style="display: inline-flex;flex-direction: column;width: 100%;">
                                    {{ $t('moveToExchangeBox') }}
                                </a-button>
                            </a-card>
                        </a-col>
                    </a-row>
                    <a-empty v-else/>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {useGameStore} from '../stores/game'
import cardConfig from '../config/cards.json'
import {useI18n} from 'vue-i18n'

const {t} = useI18n()
const gameStore = useGameStore()
const activeTab = ref('exchange')

// 确保数据加载
gameStore.loadData()
</script>

<style scoped>
.exchange-view {
    padding: 0;
}

.card-container {
    width: 140px;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.card-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-wrapper .ant-card-body {
    padding: 1px;
}

.card-image {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.ant-card-body{
    padding: 0;
}

.card-info {
    text-align: center;
    margin-top: 4px;
}

.card-title {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-value {
    font-size: 10px;
    color: #888;
    margin: 0;
}
</style>